<template>
  <div class="print-layout project-main">
    <div class="project-header">
      <div class="tools-bar">
        <h3>打印预览</h3>
        <el-button
          class="btn-text-blue"
          size="mini"
          icon="el-icon-printer"
          @click="print"
          >打印</el-button
        >
      </div>
    </div>
    <div ref="printPage" class="project-print-page">
        <div id="print-content" class="scroll-box project-print-content">
            <div class="content">
            <!-- 标题 -->
            <div class="title-wrapper">
                <div class="img-wrapper">
                <img src="@/assets/img/设备管理系统logo.png" alt="" />
                </div>
                <div class="title-text">
                {{ titleCn }}
                <br />
                {{ titleEn }}
                </div>
            </div>
            <div class="row-item f-center">
                <div class="item w-85 f-c">本值班别</div>
                <div class="item f-1 f-c">{{ thisShift.name }}</div>
                <div class="item w-85 f-c">日期</div>
                <div class="item f-1 f-c">{{ nextTime }}</div>
            </div>
            <div class="row-item f-center">
                <div class="item w-85 f-c">交班人</div>
                <div class="item f-1 f-c">{{ handoverPerson }}</div>
                <div class="item w-85 f-c">接班人</div>
                <div class="item f-1 f-c">{{ successor }}</div>
            </div>
            <template v-for="(tipsList, key, index) in filterTipsMap">
                <div class="row-item f-center" :key="index">
                <div class="item w-85">
                    <div class="f-r-center">
                    {{ key }}
                    </div>
                </div>
                <div class="col-wrapper f-1">
                    <template v-for="(item, index) in tipsList">
                    <div class="sub-row-item target-node" :key="index">
                        <div class="item w-85">
                        <div class="f-r-center">{{ item.secondLevel }}</div>
                        </div>
                        <div
                        class="item f-1 f-c-column"
                        v-html="handleContentWrap(item.content)"
                        ></div>
                    </div>
                    </template>
                </div>
                </div>
            </template>
            <div
                class="row-item f-center no-handata"
                v-if="!Object.keys(filterTipsMap).length"
            >
                <div class="f-r-center f-1">无交接事项数据</div>
            </div>
            </div>
        </div>
        <div class="pdf-header"
            style="font-weight: bold; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85); position: fixed; top: -100vh;">
            页头
        </div>
        <div class="pdf-footer"
            style="font-weight: bold; width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.85); position: fixed; top: -100vh;">
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 0px;">
                第<div class="pdf-footer-page"></div>页 / 第<div class="pdf-footer-page-count"></div>页
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { queryShiftRecordDetail } from "@/api/operationManagement/handoverManagement.js";
// import html2canvas from "html2canvas";
// import printJS from "print-js";
import { outputPDF } from "./scripts/outputPDF";
export default {
  data() {
    return {
      thisShift: {},
      nextShift: {},
      tipsList: [],
      nextTime: "",
      titleCn: "中文标题",
      titleEn: "English Title",
    };
  },
  computed: {
    // 交班人
    handoverPerson() {
      return (
        this.thisShift.staffs &&
        this.thisShift.staffs.map((item) => item.staffName).join("、")
      );
    },
    // 接班人
    successor() {
      return (
        this.nextShift.staffs &&
        this.nextShift.staffs.map((item) => item.staffName).join("、")
      );
    },
    filterTipsMap() {
      let group = {};
      this.tipsList.forEach((item) => {
        if (!group[item.firstLevel]) {
          group[item.firstLevel] = [item];
        } else {
          group[item.firstLevel].push(item);
        }
      });
      return group;
    },
  },
  methods: {
    // 对原始数据分组处理
    async handleTipsList() {
      let queryParams = this.$route.query;
      try {
        const { code, data } = await queryShiftRecordDetail({
            thisShiftId: queryParams.thisShiftId,
            nextShiftId: queryParams.nextShiftId
        });

        if (code == 200) {
          this.tipsList = data.tips;
          this.thisShift = data.thisShift;
          this.nextShift = data.nextShift;
          this.nextTime = data.nextTime;
        } else {
          throw new Error("eam-service-operation/shift接口code返回值不为200");
        }
      } catch (error) {
        console.error(error);
      }
    },
    // 处理后端返回的数据并换行
    handleContentWrap(str) {
      return (
        str &&
        str
          .split("\n")
          .map((item) => {
            return `<div style="text-align: left;letter-spacing: 1px;padding: 5px 0;" class="ant-table-row">${item}</div>`;
          })
          .join("")
      );
    },
    async goPrint() {
      const element = document.querySelector("#print-content");
      const header = document.querySelector('.pdf-header');
      const footer = document.querySelector('.pdf-footer');
      try {
        await outputPDF({
          element: element,
          header: header,
          footer: footer,
          contentWidth: 540,
        });
      } catch (error) {
        console.error("goPrint方法执行出错", error);
      }

      // let node = document.querySelector("#print-content");
      // html2canvas(node, {
      //   allowTaint: true,
      //   taintTest: false,
      //   useCORS: true,
      //   dpi: window.devicePixelRatio * 4,
      //   scale: 4,
      // }).then((canvas) => {
      //   const url = canvas.toDataURL("image/jpeg", 1.0);
      //   printJS({
      //     printable: url, // 要打印的id
      //     type: "image",
      //     customStyle: false,
      //     targetStyle: ["*"],
      //     scanStyles: false,
      //     style: `
      //             @page{size:A4;margin: 1.0cm 1cm 1.2cm 1cm;}
      //             @media print {
      //                 body{margin:0 5px}
      //             }
      //               `, //去除页眉页脚
      //   });
      // });
    },
    print() {
      this.goPrint();
    },
    outputPrintPage() {},
    // DOM插入高度
  },
  created() {
    this.handleTipsList();
  },
};
</script>

<style lang="less" scoped>
.f-c {
  display: flex;
  justify-content: center;
  align-items: center;
}

.f-c-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.f-center {
  justify-content: center;
  align-content: center;
}

.f-r-center {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.f-c-center {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.f-1 {
  flex: 1;
}

.w-85 {
  width: 85px;
}

.print-layout {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #fff;

  .project-header {
    width: 100%;
    position: fixed;
    border-bottom: 1px solid #b3b3b3;
    background-color: #fff;
    z-index: 99;

    .tools-bar {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 1000px;
      margin: 0 auto;
      padding: 10px;
      background-color: #fff;
    }
  }

  .scroll-box {
    font-size: 18px;
    width: 1000px;
    height: 100%;
    padding: 0 2px;
    margin: 0 auto;
    margin-bottom: 150px;
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    print-color-adjust: exact;

    .title-wrapper {
      border: 1px solid #333;
      padding: 10px 40px;
      margin-left: -1px;
      position: relative;

      .img-wrapper {
        display: inline-block;
        position: absolute;
        left: 40px;
        top: 50%;
        transform: translateY(-50%);
      }

      .title-text {
        font-size: 30px;
        font-weight: 600;
      }
    }

    .row-item {
      display: flex;
      flex-direction: row;

      .item {
        padding: 5px;
        border: 1px solid #333;
        margin-left: -1px;
        margin-top: -1px;
      }

      .sub-row-item {
        display: flex;
        flex-direction: row;
        flex: 1;
      }

      .col-wrapper {
        display: flex;
        flex-direction: column;
      }
    }
  }
}

.no-handata {
  padding: 10px;
  border: 1px solid #333;
  border-top: none;
  margin-left: -1px;
}

.project-print-page {
    margin-top: 10mm;
}

.content {
    padding-top: 12mm;
}

.pdf-header, .pdf-footer {
    opacity: 0;
}

@page {
  size: A4 portrait !important;
  margin: 0mm !important;
}

@media print {
  * {
    line-height: 1;
  }

  .project-header {
    display: none;
  }

  .project-main {
    overflow: visible !important;
  }

  .project-print-page {
    width: 1000px;
    padding-top: 20mm;
  }
}
</style>
